<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码</title>
    <link rel="stylesheet" href="../../font/iconfont.css">
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/gerenxinxi/genghuan.css">
</head>
<body>
        <div class="container huan1">
            <div class="row"><h3>设置新登录密码</h3></div>
            <div class="row">
                <div><img src="../../lib/img/gerenxinxi/mima1.png" alt=""></div>
            </div>
            <div class="row">
                <div class=" col-md-offset-4">
                    <p>已绑定的号码<span>189****3256</span></p>
                    <div class="duanxin"> <input type="text" placeholder="请输入短信验证码"><button class="btn_duanxin" onclick="tip()">获取验证码</button> <span><img src="../../lib/img/gerenxinxi/u22457.png" alt=""> 短信验证码已发送至189****3256</span></div>
                    <div class="tips">请输入正确的短信验证码</div> 
                    <button class="btn" onclick="btn()">下一步</button>
                </div>
            </div>
        </div>
        <div class="container huan2">
            <div class="row"><h3>设置新登录密码</h3></div>
            <div class="row">
                <div><img src="../../lib/img/gerenxinxi/mima2.png" alt=""></div>
            </div>
            <div class="row">
                 <div class="col-md-offset-4">
                     <div class="shuru"><input type="text" placeholder="8-16位的新密码"></div>
                     <div class="shuru"><input type="text" placeholder="重复输入8-16位的新密码"></div>
                     <div class="tips">请输入正确的短信验证码</div> 
                     <button class="btn" onclick="btn1()">确定</button>
                 </div>
            </div>
        </div>

        <div class="container huan3">
            <div class="row">
                <h3>设置新登录密码</h3>        
            </div>
            <div class="row">
                <div><img src="../../lib/img/gerenxinxi/mima3.png" alt=""></div>
            </div>
            <div class="row">
                <div class="col-md-offset-4">
                    <h3>恭喜你，新密码设置成功</h3>
                    <p>点击下方按钮，或60秒后自动返回</p>
                    <button class="btn" onclick="btn2()">返回</button>
                </div>
           
             </div>
        </div>
        <script>
            function tip(){
                $('.duanxin>span').css("display", "inline-block")
              
                 $('.btn').css({
                    "background-color":"#0099FF",
                    "color":"#FFFFFF"
                 })
            }
          
            function btn() {
                $('.huan1').css("display", "none")
                $('.huan2').css("display", "block")
            }
            function btn1() {
                $('.huan1').css("display", "none")
                $('.huan2').css("display", "none")
                $('.huan3').css("display", "block")
            }
            function btn2() {
                $('.huan1').css("display", "block")
                $('.huan2').css("display", "none")
                $('.huan3').css("display", "none")
            }
    
        </script>
</body>
</html>